<!--v-model: 传入组件的chartOption配置对象-->

<template>
  <div>
    <p class="m-b-10px color-red" v-if="chartOption.visualMap == undefined">
      当前组件未支持视觉映射配置，请升级组件
    </p>
    <ButtonGroup class="m-b-10px" size="small">
      <Button :disabled="chartOption.visualMap == undefined" size="small" type="primary"
              @click="addNewVisualMap('continuous')">新增连续型映射</Button>
      <Button :disabled="chartOption.visualMap == undefined" size="small" type="primary"
              @click="addNewVisualMap('piecewise')">新增分段型映射</Button>
    </ButtonGroup>

    <Table :columns="tableColumns" :data="chartOption.visualMap ? chartOption.visualMap : []"></Table>

    <Drawer v-model="modalVisible"
           title="视觉映射配置"
           placement="left"
           width="471"
           :styles="$PnUtil.buildDrawerStyleByHasFooter()">
      <div class="func-comp-form">
        <Form :label-width="140">
          <FormItem label="类型">
            <span>{{currentEditVisualMap.type | typeFilter}}</span>
          </FormItem>
          <FormItem label="映射目标系列">
            <Tooltip style="width: 100%;" content="指定当前映射配置应用于哪个数据系列，默认情况下不选择任何系列，即为应用于所有系列" :max-width="200" placement="left">
              <Select size="small" v-model="currentEditVisualMap.seriesIndex" multiple>
                <Option v-for="(item, index) in seriesSelectData" :value="index" :key="index">{{ item.name }}</Option>
              </Select>
            </Tooltip>
          </FormItem>
          <FormItem v-show="currentEditVisualMap.type == 'piecewise'" label="分段数量">
            <InputNumber size="small" :max="100" :min="0"
                         v-model="currentEditVisualMap.splitNumber" :active-change="false"></InputNumber>
          </FormItem>
          <FormItem v-show="currentEditVisualMap.type == 'piecewise'" label="选择模式">
            <Select size="small" v-model="currentEditVisualMap.selectedMode" style="width: 120px;">
              <Option value="multiple">多选</Option>
              <Option value="single">单选</Option>
            </Select>
          </FormItem>
          <FormItem label="最小值">
            <InputNumber size="small" :max="10000000" :min="-10000000"
                         v-model="currentEditVisualMap.min" :active-change="false"></InputNumber>
          </FormItem>
          <FormItem label="最大值">
            <InputNumber size="small" :max="10000000" :min="-10000000"
                         v-model="currentEditVisualMap.max" :active-change="false"></InputNumber>
          </FormItem>
          <FormItem label="显示映射组件">
            <i-switch size="small" v-model="currentEditVisualMap.show"></i-switch>
          </FormItem>
          <FormItem label="映射组件显示位置">
            <Select :transfer="true" size="small" v-model="currentEditVisualMap.position" clearable style="width: 120px;">
              <Option v-for="(item, index) in $PnChartDict.legendPositions" :value="item.value" :key="index">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="映射组件放置方式">
            <Select size="small" v-model="currentEditVisualMap.orient" style="width: 120px;">
              <Option value="horizontal">水平</Option>
              <Option value="vertical">垂直</Option>
            </Select>
          </FormItem>
          <FormItem label="反转映射组件">
            <i-switch size="small" v-model="currentEditVisualMap.inverse"></i-switch>
          </FormItem>
          <FormItem label="映射组件图形宽度">
            <InputNumber size="small" :max="10000" :min="0"
                         v-model="currentEditVisualMap.itemWidth" :active-change="false"></InputNumber>
          </FormItem>
          <FormItem label="映射组件图形高度">
            <InputNumber size="small" :max="10000" :min="0"
                         v-model="currentEditVisualMap.itemHeight" :active-change="false"></InputNumber>
          </FormItem>
          <FormItem label="映射组件两端文本">
            <Input v-if="currentEditVisualMap.text" size="small" v-model="currentEditVisualMap.text[0]" style="width: 120px;"/>
            <span> - </span>
            <Input v-if="currentEditVisualMap.text" size="small" v-model="currentEditVisualMap.text[1]" style="width: 120px;"/>
          </FormItem>
          <FormItem label="两端文字与主体间距">
            <InputNumber size="small" :max="10000" :min="0"
                         v-model="currentEditVisualMap.textGap" :active-change="false"></InputNumber>
          </FormItem>
          <FormItem label="映射组件文本颜色">
            <PnColorPicker v-if="currentEditVisualMap.textStyle" size="small" v-model="currentEditVisualMap.textStyle.color" alpha recommend/>
          </FormItem>
          <FormItem label="映射组件文本字号">
            <InputNumber v-if="currentEditVisualMap.textStyle" size="small" :max="10000" :min="0"
                         v-model="currentEditVisualMap.textStyle.fontSize" :active-change="false"></InputNumber> px
          </FormItem>

          <FormItemPanel v-if="currentEditVisualMap.type == 'piecewise'" title="自定义分段">
            <Button class="m-b-5px" size="small" type="primary" @click="addPiecesItem">新增</Button>

            <table style="width: 100%; border: 1px solid #9e9e9e; border-radius: 4px;">
              <thead>
                <tr>
                  <th>颜色</th>
                  <th>条件</th>
                  <th>数值</th>
                  <th>条件</th>
                  <th>数值</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in piecesTableData" :key="index">
                  <td><PnColorPicker size="small" v-model="item.color" alpha recommend style="width: 100%;" :clearBtn="false"/></td>
                  <td>
                    <Select size="small" v-model="item.condition1">
                      <Option value="gt">大于</Option>
                      <Option value="lt">小于</Option>
                      <Option value="gte">大于等于</Option>
                      <Option value="lte">小于等于</Option>
                    </Select>
                  </td>
                  <td>
                    <InputNumber size="small" v-model="item.value1" style="width: 100%;"/>
                  </td>
                  <td>
                    <Select size="small" v-model="item.condition2">
                      <Option value="gt">大于</Option>
                      <Option value="lt">小于</Option>
                      <Option value="gte">大于等于</Option>
                      <Option value="lte">小于等于</Option>
                    </Select>
                  </td>
                  <td>
                    <InputNumber size="small" v-model="item.value2" style="width: 100%;"/>
                  </td>
                  <td>
                    <a class="color-white" @click="deletePiecesItem(index)"><Icon type="md-trash" /></a>
                  </td>
                </tr>
              </tbody>
            </table>
          </FormItemPanel>
          <FormItemPanel title="范围内色系">
            <Button class="m-b-5px" size="small" type="primary" @click="addInRangeColor">新增</Button>
            <Row v-if="currentEditVisualMap.inRange">
              <i-col :span="4" v-for="(color, index) in currentEditVisualMap.inRange.color" :key="index">
                <PnColorPicker size="small" v-model="currentEditVisualMap.inRange.color[index]" alpha recommend :clearBtn="false"/>
                <a class="color-white" @click="deleteInRangeColor(index)"><Icon type="md-trash" /></a>
              </i-col>
            </Row>
          </FormItemPanel>
          <FormItemPanel title="范围外色系">
            <Button class="m-b-5px" size="small" type="primary" @click="addOutOfRangeColor">新增</Button>
            <Row v-if="currentEditVisualMap.outOfRange">
              <i-col :span="4" v-for="(color, index) in currentEditVisualMap.outOfRange.color" :key="index">
                <PnColorPicker size="small" v-model="currentEditVisualMap.outOfRange.color[index]" alpha recommend :clearBtn="false"/>
                <a class="color-white" @click="deleteOutOfRangeColor(index)"><Icon type="md-trash" /></a>
              </i-col>
            </Row>
          </FormItemPanel>
        </Form>
      </div>
      <DrawerFooter>
        <Button class="m-r-5px" @click="modalVisible = false">关闭</Button>
        <Button type="primary" @click="submitVisualMap">确认</Button>
      </DrawerFooter>
    </Drawer>

  </div>
</template>

<script>
export default {
  name: "EchartsVisualMapConfigForm",
  props: {
    value: {
      type: Object,
      default () {
        return {}
      }
    },
  },
  data() {
    return {
      chartOption: this.value,
      modalVisible: false,
      isEdit: false,
      tableColumns: [
        {
          title: '类型',
          key: 'type',
          render: (h, params) => {
            if (params.row.type == 'continuous') {
              return h('span', '连续型视觉映射')
            }else if (params.row.type == 'piecewise') {
              return h('span', '分段型视觉映射')
            }
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 120,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.editVisualMap(params.index)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      title: '提醒',
                      content: '确认删除此映射配置吗？',
                      onOk: () => {
                        this.deleteVisualMap(params.index)
                      }
                    });

                  }
                }
              }, '删除')
            ]);
          }
        }
      ],
      currentEditVisualMap: {},

      piecesTableData: []
    }
  },
  mounted() {

  },
  methods: {
    addNewVisualMap (type) {
      this.modalVisible = true
      this.piecesTableData = []
      let newVisualMap = {}
      switch (type) {
        case 'continuous':
          newVisualMap = {
            type: 'continuous',
            min: 0,
            max: 2000,
            //range: [0, 100],
            calculable: true,
            realtime: true, //拖拽时，是否实时更新。
            inverse: false,
            itemWidth: 20,
            itemHeight: 140,
            align: 'auto',
            text: [],
            textGap: 10,
            show: true,
            seriesIndex: null,
            hoverLink: true,
            inRange: {
              color: ['#4caf50', '#ff9800', '#f44336']
            },
            outOfRange: null,
            orient: 'horizontal',
            textStyle: {
              color: 'rgb(144, 160, 174)',
              fontSize: 12
            }
          }
          break
        case 'piecewise':
          newVisualMap = {
            type: 'piecewise',
            splitNumber: 5,
            pieces: [
              // {min: 0, max: 60},
              // {min: 60, max: 120},
              // {min: 120, max: 180},
              // {min: 180, max: 240},
              // {min: null, max: null, value: 280},
              // {min: 300}
            ],
            min: 0,
            max: 2000,
            minOpen: false,
            maxOpen: false,
            selectedMode: 'multiple',
            inverse: false,
            precision: 0,
            itemWidth: 20,
            itemHeight: 14,
            align: 'auto',
            text: [],
            textGap: 10,
            showLabel: true,
            itemGap: 10,
            itemSymbol: 'roundRect',
            show: true,
            seriesIndex: null,
            hoverLink: true,
            inRange: null,
            outOfRange: null,
            orient: 'horizontal',
            textStyle: {
              color: 'rgb(144, 160, 174)',
              fontSize: 12
            }
            // formatter: (value, value2) => {
            //   return value + ' - ' + value2;
            // }
          }
          break
      }
      this.currentEditVisualMap = newVisualMap
    },
    editVisualMap (visualMapItemIndex) {
      this.modalVisible = true
      this.isEdit = true
      this.currentEditVisualMap = this.chartOption.visualMap[visualMapItemIndex]
      if (this.currentEditVisualMap.pieces) {
        this.piecesTableData = []
        this.currentEditVisualMap.pieces.forEach((item, index) => {
          let keys = Object.keys(item)
          this.piecesTableData.push({
            color: item.color,
            condition1: keys[1],
            value1: item[keys[1]],
            condition2: keys[2],
            value2: item[keys[2]]
          })
        })
      }
    },
    addInRangeColor () {
      if (this.currentEditVisualMap.inRange && Object.prototype.toString.call(this.currentEditVisualMap.inRange.color) === '[object Array]') {
        this.currentEditVisualMap.inRange.color.push('#fff')
      }else {
        this.currentEditVisualMap.inRange = {
          color: ['#fff']
        }
      }
    },
    addOutOfRangeColor () {
      if (this.currentEditVisualMap.outOfRange && Object.prototype.toString.call(this.currentEditVisualMap.outOfRange.color) === '[object Array]') {
        this.currentEditVisualMap.outOfRange.color.push('#fff')
      }else {
        this.currentEditVisualMap.outOfRange = {
          color: ['#9e9e9e']
        }
      }
    },
    deleteInRangeColor (index) {
      this.currentEditVisualMap.inRange.color.splice(index, 1)
      if (this.currentEditVisualMap.inRange.color.length == 0) {
        this.currentEditVisualMap.inRange = null
      }
    },
    deleteOutOfRangeColor (index) {
      this.currentEditVisualMap.outOfRange.color.splice(index, 1)
      if (this.currentEditVisualMap.outOfRange.color.length == 0) {
        this.currentEditVisualMap.outOfRange = null
      }
    },
    addPiecesItem () {
      this.piecesTableData.push({
        color: '#fff',
        condition1: '',
        value1: 0,
        condition2: '',
        value2: 0
      })
    },
    deletePiecesItem (index) {
      this.piecesTableData.splice(index, 1)
    },
    submitVisualMap () {
      if (this.piecesTableData.length > 0) {
        this.currentEditVisualMap.pieces = []
        this.piecesTableData.forEach((item, index) => {
          let newPiecesItem = {
            color: item.color
          }
          newPiecesItem[item.condition1] = item.value1
          newPiecesItem[item.condition2] = item.value2
          this.currentEditVisualMap.pieces.push(newPiecesItem)
        })
      }
      if (Object.prototype.toString.call(this.currentEditVisualMap.seriesIndex) === '[object Array]'
          && this.currentEditVisualMap.seriesIndex.length == 0) {
        this.currentEditVisualMap.seriesIndex = null
      }
      if (this.isEdit) {
        this.isEdit = false
      }else {
        this.chartOption.visualMap.push(this.currentEditVisualMap)
      }
      this.modalVisible = false
    },
    deleteVisualMap (index) {
      this.chartOption.visualMap.splice(index, 1)
    }
  },
  computed: {
    seriesSelectData () {
      if (Object.prototype.toString.call(this.chartOption.series) === '[object Object]') {
        return [{
          name: this.chartOption.series.name ? this.chartOption.series.name : '系列1'
        }]
      }else if (Object.prototype.toString.call(this.chartOption.series) === '[object Array]') {
        return this.chartOption.series.map((item, index) => {
          if (item.name) {
            return {name: item.name}
          } else {
            return {name: '系列'+(index+1)}
          }
        })
      }
      return []
    }
  },
  filters: {
    typeFilter (type) {
      switch (type) {
        case 'continuous':
          return '连续型'
        case 'piecewise':
          return '分段型'
      }
    }
  },
  watch: {
    value (val) {
      this.chartOption = val;
    }
  }
}
</script>

<style scoped>

</style>
